.app-register{
    height: 100%;
    justify-content: space-between;
    background-image: url(../imgs/sign-bg.jpg);
    background-size: 120%;
    background-repeat: no-repeat;


    .header{
        width: 100%;
        flex: 1;
        justify-content: flex-end;
        position: relative;
        
        p{
            width: 100%;
            margin-bottom: 4px;
            a{
            
                line-height: 60px;
                position: absolute;
                right: 15px;
            }
        }
        p:nth-child(1){
            height: 60px;
        }
    }

    .main{
        width: 100%;
        flex: 4;
        position: relative;


        p{

            input{
                
                background-color: #c2c0c3;
                border-radius: 25px;
                opacity: 0.5;
            }
            


            input::placeholder{
                color: #fff;
                text-indent: 10px;
            }
        }

        p:nth-child(1) select{
            flex: 1;
            text-align: center;
            background-color: #c2c0c3;
            opacity: 0.5;
            border: none;
            border-top-left-radius: 25px;
            border-bottom-left-radius: 25px;
        }
        p:nth-child(1) input{
            flex: 5;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }

        p:nth-child(2) input{
            flex: 3;

        }
        p:nth-child(2) canvas{
            width: 123px;
            height: 50px;
            flex: 2;
            width: 100px;
            display: inline-block;
            
        }
        p:nth-child(5) input{
            background-color: #63FFA7;
            color: #fff;
            font-weight: bold;
            opacity: 0.7;
        }
        .hint{
            width: 100%;
        }
    }

    .footer{
        width: 100%;
        flex: 1;

        p{
            width: 100%;
            text-align: center;
        }
    }
}